<app-breadcrumbs [items]="breadcrumbs">
    <div page-help>
        <div class="flex align-items-top">
            <div class="pi pi-info-circle p-message-icon"></div>
            <div class="ml-2">
                To add or remove machines go to <a routerLink="/machines/authorized">machines page</a>
            </div>
            .
        </div>
        <p-divider></p-divider>
        <div class="flex align-items-top mt-2">
            <div class="pi pi-info-circle p-message-icon"></div>
            <div class="ml-2" id="intervals-config-msg">
                <p class="mt-0">
                    Using the settings in the Intervals section it is possible to configure the intervals at which the
                    Stork server fetches various types of information from the monitored machines and applications. Each
                    configured value designates a time period between completion of the previous attempt to fetch some
                    type of information from the machines and the beginning of the next attempt to fetch new
                    information.
                </p>
                <p class="mb-0">
                    For example, if the Kea Hosts Puller Interval is set to 10 seconds and it takes 5 seconds to pull
                    the hosts information, the time period between the beginnings of the two consecutive attempts to
                    pull the hosts information will be equal to 15 seconds. The pull time varies between deployments and
                    depends on the amount of information pulled, network congestion and other factors. The setting
                    specified here guarantees that there is a constant idle time between any two attempts.
                </p>
            </div>
        </div>
    </div>
</app-breadcrumbs>

<ng-container [ngSwitch]="formState">
    <ng-container *ngSwitchCase="'success'">
        <form [formGroup]="settingsForm">
            <div class="w-full max-w-50rem">
                <p-fieldset legend="Security">
                    <div class="flex align-items-center">
                        <p-checkbox
                            formControlName="enableMachineRegistration"
                            [binary]="true"
                            inputId="machine-registration-checkbox"
                        />
                        <label class="ml-2" for="machine-registration-checkbox">Enable machine registration</label>
                        <app-help-tip subject="Enable Machine Registration">
                            New machines begin registration in the Stork server using a dedicated REST API endpoint. The
                            same endpoint is used for re-registering already connected machines when they are restarted.
                            Since new machines are registered rarely it is practical to disable this option to prevent
                            malicious registration attempts of the fake machines. An administrator can re-enable it at
                            any time when new registrations are expected. Disabling this option does not affect an
                            ability to re-register existing machines.
                        </app-help-tip>
                    </div>
                </p-fieldset>
                <p-fieldset legend="Intervals">
                    <div *ngFor="let setting of intervalSettings" class="my-2 flex flex-column">
                        <label [for]="setting.formControlName"> {{ setting.title }} (in seconds): </label>
                        <div class="flex align-items-center">
                            <input
                                type="number"
                                [formControlName]="setting.formControlName"
                                [id]="setting.formControlName"
                                class="w-full"
                            /><app-help-tip [subject]="setting.title">{{ setting.help }}</app-help-tip>
                        </div>
                        <div *ngIf="hasError(setting.formControlName, 'required')" class="p-error">It is required.</div>
                        <div *ngIf="hasError(setting.formControlName, 'min')" class="p-error">
                            It must not be negative.
                        </div>
                    </div>
                </p-fieldset>
                <p-fieldset legend="Grafana & Prometheus">
                    <div *ngFor="let setting of urlSettings" class="my-2 flex flex-column">
                        <label [for]="setting.formControlName">{{ setting.title }}:</label>
                        <div class="flex align-items-center">
                            <input
                                type="url"
                                [formControlName]="setting.formControlName"
                                [id]="setting.formControlName"
                                class="w-full"
                            /><app-help-tip [subject]="setting.title">{{ setting.help }}</app-help-tip>
                        </div>
                    </div>
                </p-fieldset>
            </div>
        </form>

        <button
            pButton
            type="button"
            [disabled]="settingsForm.invalid"
            label="Save Settings"
            id="save-settings-button"
            (click)="saveSettings()"
            class="mt-2 ml-1"
        ></button>

        <span *ngIf="settingsForm.invalid" class="p-error ml-3"> There are issues in the form values. </span>
    </ng-container>
    <ng-container *ngSwitchCase="'fail'">
        <div class="text-lg">Fetching current settings from the server failed. Click the button to retry.</div>
        <button pButton type="button" label="Retry" id="retry-button" (click)="retry()" class="mt-4"></button>
    </ng-container>
    <ng-container *ngSwitchDefault>
        <p-progressSpinner></p-progressSpinner>
    </ng-container>
</ng-container>
